<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">  
        <el-form ref="book" :model="book" label-width="80px">
            <el-form-item label="书名">
            <el-input v-model="book.f_title"></el-input>
            </el-form-item>
            <el-form-item label="作者">
                <el-input v-model="book.f_author"></el-input>
            </el-form-item>
            <el-form-item label="价格">
                <el-input v-model="book.f_price"></el-input>
            </el-form-item>
            <el-form-item label="类型">
              <el-select v-model="book.f_type" placeholder="请选择图书类型">
                <el-option label="小说" value="小说"></el-option>
                <el-option label="教材" value="教材"></el-option>
                <el-option label="散文" value="散文"></el-option>
                <el-option label="诗歌" value="诗歌"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="封面">
                <input type="file"  @change="onChange">
            </el-form-item>
            <el-form-item>
              <el-button type="success" @click="onClick">确定</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>                   
    </div> 
    
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/vuex.js"></script>
    <script src="js/store.js"></script>
    <script src="js/moment.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script> 

    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                types:['小说','教材','散文','诗歌'],                
                img:null, //保存上传的图片信息
                book:{f_id:0, f_title:'', f_author:'', f_price:0, f_image:'' }
            },
            methods: {

                //上传图片到Server
                onChange(e){
                    this.img = e.target.files[0] //将表单中所选择的图片保存到Vue对象中

                    let _this = this                    
                    let formData = new FormData()
                    //formData与MVC中Book控制器的 public JsonResult upload( HttpPostedFileBase image )的image参数相匹配
                    formData.append('image',this.img) 
                    

                    axios.post('http://localhost:8888/Book/upload',formData)
                         .then(function (rs) {        
                            _this.book.f_image = rs.data.image //将保存到服务器中的新文件名返回到                                               
                            console.log("上传图片Ok："+_this.book.f_image  );
                    })
                },
                //添加图书到DB
                onClick(){                  
                    let _this = this
                    axios.post('http://localhost:8888/Book/add',_this.book)
                         .then(function (rs) {
                            console.log(rs.data);
                    })
                }
            },
        })
    </script>
</body>
</html>